<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示所有分类</title>
    <script src="javascript/vue.js"></script>
    <script src="javascript/jquery-3.3.1.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        #vue {
            margin: 15px 50px;
        }

        .green-text {
            color: green;
        }

        .red-text {
            color: red;
        }

        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }

        .custom-input-search {
            width: 220px;
        }

        .custom-input-button {
            width: 80px;
        }
    </style>
</head>
<body>
<div id="vue">
    <el-row>
        <el-col :span="2">
            <div class="grid-content">
                <el-button plain
                           size="mini"
                           type="success"
                           @click="beforeAddType">添加分类
                </el-button>
            </div>
        </el-col>
        <el-col :span="1">
            <div class="grid-content">
            </div>
        </el-col>
        <el-col :span="5">
            <div class="grid-content">
                <el-input
                        placeholder="请输入分类名"
                        v-model="searchType"
                        clearable
                        size="mini"
                        class="custom-input-search">
                </el-input>
            </div>
        </el-col>
        <el-col :span="1">
            <div class="grid-content"></div>
        </el-col>
        <el-col :span="2">
            <div class="grid-content">
                <el-button
                        icon="el-icon-search"
                        type="primary"
                        size="mini"
                        @click="conditionSearch"
                        class="custom-input-button">搜索
                </el-button>
            </div>
        </el-col>
        <el-col :span="1">
            <div class="grid-content">
            </div>
        </el-col>
        <el-col :span="12">
            <div class="grid-content">
                <el-button plain
                           size="mini"
                           type="primary"
                           v-if="zi"
                           @click="loadType">返回 | 当前 => {{this.currentParent.name}}
                </el-button>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24">
            <div class="grid-content">
                <template>
                    <el-table
                            :data="type"
                            style="width: 100%"
                    >
                        <el-table-column
                                prop="id"
                                label="分类ID" width="120">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="分类名" width="180">
                        </el-table-column>
                        <el-table-column
                                prop="state"
                                label="状态" width="180">
                            <template slot-scope="scope">
                                <span :class="scope.row.state === 1? 'green-text' : 'red-text'">
                                  {{ scope.row.state === 1 ? '启用' : '停用' }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="是否启用" prop="state" v-if="false">
                        </el-table-column>
                        <el-table-column label="操作" width="480">
                            <template slot-scope="scope">
                                <el-button plain
                                           size="mini"
                                           :type="scope.row.state === 1 ? 'info' : 'success'"
                                           @click="changeTypeState(scope.row)">
                                    {{scope.row.state === 1 ? '停用' : '启用'}}
                                </el-button>
                                <el-button plain style="margin-left: 40px"
                                           size="mini"
                                           type="warning"
                                           @click="catchType(scope.row)" v-if="!zi" disable="{{scope.row.state === 1 ? true : false}}">查看详情
                                </el-button>
                                <el-button plain style="margin-left: 40px"
                                           size="mini"
                                           @click="loadOneType(scope.row.id)">编辑
                                </el-button>
                                <el-button plain style="margin-left: 40px"
                                           size="mini"
                                           type="danger"
                                           @click="deleteType(scope.row.id)">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>

                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="pageNum"
                            :page-sizes="[2, 4, 6, 8]"
                            :page-size="pageSize"
                            layout="sizes, prev, pager, next"
                            :total="total">
                    </el-pagination>
                </div>

            </div>
        </el-col>
    </el-row>

    <el-dialog title="分类管理" :visible.sync="FormView">
        <el-form :model="newType" :rules="rules" ref="newType" label-width="100px">
            <el-form-item label="分类名" prop="name">
                <el-input v-model="newType.name" style="width: 220px"></el-input>
            </el-form-item>
            <el-form-item label="父分类" prop="parentId" v-if="false">
                <el-select v-model="newType.parentId" clearable placeholder="请选择父分类">
                    <el-option
                            v-for="t in types"
                            :key="t.id"
                            :label="t.name"
                            :value="t.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="state" v-if="!edit">
                <el-select v-model="newType.state" placeholder="请选择分类状态">
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="停用" value="-1"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="{{edit ? doEditType('newType') : addType('newType')}}">
                {{edit ? '编辑' : '添加'}}
            </el-button>
            <el-button @click="FormView=false">取消</el-button>
        </div>
    </el-dialog>

</div>
</body>
<script>
    let v = new Vue({
        el: "#vue",
        data: {
            type: [],
            newType: {},
            FormView: false,
            rules: {
                name: [
                    {required: true, message: '请输入分类名', trigger: 'blur'},
                    {min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur'}
                ],
                parentId: [
                    {required: true, message: '请选择父分类', trigger: 'change'}
                ],
                state: [
                    {required: true, message: '请选择分类状态', trigger: 'change'}
                ]
            },
            zi: false,
            edit: false,
            currentParent: {},
            types: [],
            pageNum: 1,
            total: 0,
            pageSize: 6,
            searchType: '',

        },
        methods: {
            handleSizeChange(val) {
                this.pageSize = val;
                if (v.zi) {
                    v.catchType(v.currentParent);
                } else {
                    v.loadType();
                }
            },
            handleCurrentChange(val) {
                this.pageNum = val;
                if (v.zi) {
                    v.catchType(v.currentParent);
                } else {
                    v.loadType();
                }
            },
            loadType() {
                $.ajax({
                    type: 'get',
                    data: {
                        'pageNum': this.pageNum,
                        'pageSize': this.pageSize
                    },
                    url: "/type/selectParentType",
                    success: function (data) {
                        v.total = data.total;
                        v.type = data.list;
                        v.types = data.list;
                        v.zi = false;
                        v.currentParent.id = 0;
                    }
                })
            },
            loadOneType(id) {
                $.ajax({
                    type: 'get',
                    url: "/type/selectOneType/" + id,
                    success: function (data) {
                        v.FormView = true;
                        v.edit = true;
                        v.newType = data;
                    }
                })
            },
            doEditType(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            type: 'post',
                            data: JSON.stringify(this.newType),
                            contentType: 'application/json',
                            url: "/type/updateType",
                            success: function () {
                                v.FormView = false;
                                v.edit = false;
                                v.newType = {};
                                if (v.zi) {
                                    v.catchType(v.currentParent);
                                } else {
                                    v.loadType();
                                }
                            }
                        })
                        return true;
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            deleteType(id) {
                if (confirm('确定要删除该分类吗？')) {
                    $.ajax({
                        type: 'get',
                        url: "/type/deleteType/" + id,
                        success: function (data) {
                            if (data === -1) {
                                alert("该分类为启用状态，请停用后继续操作！");
                            }
                            if (data === -2) {
                                alert("子分类仍在被使用，请停用后继续操作！");
                            }
                            if (v.zi) {
                                v.catchType(v.currentParent);
                            } else {
                                v.loadType();
                            }
                        }
                    })
                }
            },
            changeTypeState(type) {
                console.log('更改分类状态：', type);
                $.ajax({
                    type: 'post',
                    data: JSON.stringify(type),
                    contentType: 'application/json',
                    url: "/type/changeTypeState",
                    success: function (data) {
                        if (data === -1) {
                            alert("父分类已停用，请启用后继续操作！");
                        }
                        if (v.zi) {
                            v.catchType(v.currentParent);
                        } else {
                            v.loadType();
                        }
                    }
                })
            },
            beforeAddType() {
                this.newType = {};
                this.FormView = true;
                this.edit = false;
            },
            addType(formName) {
                this.newType.parentId = this.currentParent.id;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            type: 'post',
                            data: JSON.stringify(this.newType),
                            contentType: 'application/json',
                            url: "/type/insertType",
                            success: function () {
                                v.FormView = false;
                                v.newType = {};
                                if (v.zi) {
                                    v.catchType(v.currentParent);
                                } else {
                                    v.loadType();
                                }
                            }
                        })
                        return true;
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            catchType(value) {
                this.currentParent = value;
                $.ajax({
                    type: 'get',
                    data: {
                        'pageNum': this.pageNum,
                        'pageSize': this.pageSize
                    },
                    url: "/type/selectChildTypeByParentId/" + value.id,
                    success: function (data) {
                        v.total = data.total;
                        v.type = data.list;
                        v.zi = true;
                    }
                })
            },
            conditionSearch() {
                $.ajax({
                    type: 'get',
                    data: {
                        'pageNum': this.pageNum,
                        'pageSize': this.pageSize,
                        'searchType': this.searchType,
                        'currentParentId':this.currentParent.id
                    },
                    url: "/type/conditionSearch",
                    success: function (data) {
                        v.total = data.total;
                        v.type = data.list;
                        v.zi = false;
                        v.currentParent.id = 0;
                    }
                })
            }
        },
        created() {
            this.loadType();
        }
    })
</script>
</html>